import React, { useEffect, useState } from 'react'
import {
    Card,
    Button,
    Cascader,
    Form,
    Input,
    InputNumber,
    message,
} from "antd"

import { Link } from "react-router-dom"
import { PlusOutlined } from '@ant-design/icons';
import { findCategoryByProduct } from "../../apis/categoryApi"
import { addProductApi, findById } from "../../apis/goodsApi"
import { useLocation } from "react-router-dom"
import MyUpload from '../../components/MyUpload';


const { TextArea } = Input;
export default function ProductAdd() {
    const [categoryData, setCategoryDate] = useState([])
    const [typeId, setTypeId] = useState("")
    const { state } = useLocation()
    const [imgPath,setImgPath] = useState("")
    //{name:"",title:"",type:{}}
    const [detail,setDetail] = useState({})
    const [form] = Form.useForm()
    useEffect(() => {
        fecthData()
        fetchData2()
    }, [])
    useEffect(()=>{
        form.setFieldsValue({...detail,type:["数码产品","手机"]})
    },[detail])
    const fetchData2 =async () => {
        const res = await findById(state)
        console.log(res);
        const temp = res.data.data
        temp.imgSrc = "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
        setDetail(res.data.data)
    }
    const fecthData = async () => {
        const res = await findCategoryByProduct()
        console.log(res);
        setCategoryDate(res.data.data)
    }
    const cascaderChange = (value, value2) => {
        console.log(value); //[家用电器，电饭锅]
        console.log(value2); //[{}.{id}]
        setTypeId(value2[1].id)
    }
    const onFinish = async (values) => {
        // values.imgSrc = imgPath
        // values.type = typeId
        // console.log(values);
        // const res = await addProductApi(values)
        // console.log(res);
        // if (res.data.code) {
        //     message.success("添加成功")
        //     //路由跳转，跳转商品列表页面
        // } else {
        //     message.error("添加失败")
        // }
    }
    const onFinishFailed = (values) => {
        console.log(values);
    }
    return (
        <Card
            title="添加商品"
            extra={<Link to="/home/list">返回</Link>}
        >
            <Form
                labelCol={{
                    span: 6,
                }}
                wrapperCol={{
                    span: 18,
                }}
                layout="horizontal"
                style={{
                    maxWidth: 600,
                }}
                form={form}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    label="商品名字"
                    name="name"
                    rules={[
                        {
                            required: true,
                            message: '商品名字不能为空',
                        },
                        {
                            pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/,
                            message: "输入内容不合法"
                        }
                    ]}
                >
                    <Input placeholder="请输入商品名字" />
                </Form.Item>
                <Form.Item label="商品描述" name="title">
                    <Input placeholder="请输入商品描述" />
                </Form.Item>
                <Form.Item label="商品价格" name="price">
                    <InputNumber />
                </Form.Item>
                <Form.Item label="商品分类" name="type">
                    <Cascader
                        options={categoryData}
                        allowClear={true}
                        onChange={cascaderChange}
                    />
                </Form.Item>
                <Form.Item label="文件上传">
                    {/* 文件上传 */}
                    <MyUpload showImgSrc={detail.imgSrc} action="http://127.0.0.1:8002/goods/fileUpload" fileName="imgSrc" setImgPath={setImgPath}></MyUpload>
                </Form.Item>

                <Form.Item label="商品详情" name="msg">
                    <TextArea rows={4} />
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        添加
                    </Button>
                </Form.Item>
            </Form>
        </Card >
    )
}
